<template>
  <view>
    <view class="nav-con" v-if="userInfo">
      <view class="shadow"></view>
      <view class="flex-center f16 bold">我的</view>
      <view class="flex-align flex-between w mt55">
        <view class="flex-align">
          <u-avatar :src="userInfo.avatar"></u-avatar>
          <text class="ml20 f15">{{ userInfo.userName }}</text>
        </view>
        <navigator :url="`/my/editUserInfo`" hover-class="none" class="">
          <image src="@/static/images/set.png" mode="scaleToFill" style="width: 36rpx; height: 36rpx" />
        </navigator>
      </view>
    </view>
    <view class="w bg pad30 mt60">
      <view class="flex-align flex-between">
        <text class="f13">我的订单</text>
        <navigator url="/my/orderList" open-type="navigate" hover-class="none">
          <view class="flex-align">
            <text class="color-info f12">全部订单</text>
            <u-icon name="arrow-right" color="#999"></u-icon>
          </view>
        </navigator>
      </view>
      <view class="flex-between mt50" v-if="orderCountList.length > 0">
        <view class="flex-column pr" @click="clickOrder(1)">
          <u-badge
            bgColor="#D7C998"
            color="#000"
            max="99"
            :value="orderCountList[0].orderCount"
            :offset="[-10, -5]"
            :absolute="true"
          ></u-badge>
          <image src="@/static/images/dfk.png" mode="scaleToFill" style="width: 60rpx; height: 60rpx" />
          <text class="mt10">待付款</text>
        </view>
        <view class="flex-column pr" @click="clickOrder(2)">
          <u-badge
            bgColor="#D7C998"
            color="#000"
            max="99"
            :value="orderCountList[1].orderCount"
            :offset="[-10, -5]"
            :absolute="true"
          ></u-badge>
          <image src="@/static/images/dfh.png" mode="scaleToFill" style="width: 60rpx; height: 60rpx" />
          <text class="mt10">待发货</text>
        </view>
        <view class="flex-column pr" @click="clickOrder(3)">
          <u-badge
            bgColor="#D7C998"
            color="#000"
            max="99"
            :value="orderCountList[2].orderCount"
            :offset="[-10, -5]"
            :absolute="true"
          ></u-badge>
          <image src="@/static/images/dsh.png" mode="scaleToFill" style="width: 60rpx; height: 60rpx" />
          <text class="mt10">待收货</text>
        </view>
        <view class="flex-column pr" @click="clickOrder(4)">
          <u-badge
            bgColor="#D7C998"
            color="#000"
            max="99"
            :value="orderCountList[3].orderCount"
            :offset="[-10, -5]"
            :absolute="true"
          ></u-badge>
          <image src="@/static/images/sh.png" mode="scaleToFill" style="width: 60rpx; height: 60rpx" />
          <text class="mt10">退款/售后</text>
        </view>
      </view>
    </view>
    <image src="@/static/images/my.png" mode="scaleToFill" class="w mt20" style="display: block; height: 400rpx" />
    <view class="mt100">
      <u-button @tap="clickLogout">退出登录</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import homeApi from '@/api/homeApi'
import loginApi from '@/api/loginApi'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

const clickLogout = () => {
  loginApi.logout()
}

onShow(() => {
  let data = uni.getStorageSync('userId')
  if (!data) {
    uni.reLaunch({ url: '/pages/login/index' })
  }
  getUserInfo()
  getOrderCount()
})

const orderCountList: any = ref([])
const getOrderCount = () => {
  homeApi.getOrderCount({ userId: uni.getStorageSync('userId') }).then((res: any) => {
    orderCountList.value = res.data
  })
}

const userInfo = ref()
const getUserInfo = () => {
  homeApi
    .getUserInfo({
      userId: uni.getStorageSync('userId'),
    })
    .then((res: any) => {
      userInfo.value = res.data
    })
}

const clickOrder = (idx: number) => {
  uni.navigateTo({
    url: `/my/orderList?state=${idx}`,
  })
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.nav-con {
  padding-top: calc(var(--status-bar-height) + 30px);

  .shadow {
    position: absolute;
    left: 50%;
    top: 0;
    width: 150px;
    height: 100px;
    background: $uni-color-primary;
    opacity: 0.2;
    filter: blur(20px);
  }
}
</style>
